<template>

	<view class="center-list">
		<view class="operate-receive">
			<view class="receive-left">
				<image src="/static/lh/equity/vip.png" style="width: 100rpx" mode="widthFix"></image>
			</view>
			<view class="receive-center">
				<view class="center-name">TCL会员</view>
				<view class="center-month">月卡</view>
			</view>
			<view class="receive-btn">
				<button class="clickBtn" @click="laterTest">立即领取</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import initApi from '@/apis/init.js';
import dayjs from 'dayjs';
//引入防抖函数
import { customDebounce } from '@/utils/commo.js';

const emit = defineEmits(['refrash']);
const props = defineProps({
	pageParams: {
		type: Object,
		default: () => {}
	}
});
const list1 = reactive([{ name: 'TCL' }]);
// 定义方法
function click(item) {
	console.log('item', item);
}


// 立即领取
const laterTest = customDebounce(() => {
	//需要防抖执行的逻辑
	let arr = {
		equityDetailId: ''
	};
	// return uni.utils.toast('功能开发中。。。');
	const newList = props.pageParams.list.filter((item) => item.receiveStatus == 1);
	const noReceive = newList.filter((item) => {
		const time1 = item.effectiveTime; // 8yue
		const time2 = item.expireTime; // 9yue
		const nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:ss:mm');
		const dayjsTime1 = dayjs(time1);
		const dayjsTime2 = dayjs(time2);
		const dayjsTime3 = dayjs(nowTime);
		return dayjsTime3.isAfter(dayjsTime1) && dayjsTime3.isBefore(dayjsTime2);
	});
	if (noReceive && noReceive.length > 0) {
		arr.equityDetailId = noReceive[0].id;
		initApi
			.getTclGrantEquity(arr)
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					uni.utils.toast('领取成功');
					setTimeout(() => {
						emit('refrash');
					}, 200);
				} else {
					uni.utils.toast(res.message);
					// uni.utils.toast('领取成功');
				}
			})
			.catch((error) => {
				uni.utils.toast('领取失败');
			});
	} else {
		return uni.utils.toast('暂无权益卷可领取');
	}
	console.log(noReceive);
}, 200);
</script>

<style scoped lang="scss">


.center-list {
	margin-top: 20rpx;
	.list-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.operate-receive {
		.receive-left {
			// line-height: 120rpx;
			margin-top: 15rpx;
			width: 100rpx;
		}
		.receive-center {
			flex-grow: 1;
			margin-left: 50rpx;
			.center-name {
				margin-top: 15rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
			.center-month {
				margin-top: 10rpx;
			}
		}
		.receive-btn {
			width: 200rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			.clickBtn {
				background-color: #6082ce;
				color: #fff;
				font-size: 24rpx;
				border-radius: 50rpx;
				line-height: 60rpx;
			}
		}
		margin: 0 auto;
		margin-top: 10rpx;
		height: 130rpx;
		border-radius: 5rpx;
		display: flex;
		width: 700rpx;
		background-color: #ffffff;
	}
}
</style>
